import React from 'react'
import Catalogue from '../catalogue/catalogue'
import PropTypes from 'prop-types';
import { Route, Switch } from 'react-router-dom';

import './main.css';

import Game from '../Game.component/Game';
import TestDiff from '../TestDiff.component';
import TestModal from '../TestModal.component/TestModal';
import TestPromise from "../TestPromise.component/TestPromise";
import TestPure from "../TestPure.component/TestPure";
import HookParent from '../TestHookDiff.component/TestHook';
import TestTree from '../TestTree.component/TestTree';
import { TestVirtualScroll } from '../virtualScroll/virtualScroll';
import { ScanPage } from '../ImgToText.component/index';

const catalogueArr = [
  {path: '/test-diff', name: 'test-diff'},
  {path: '/test-modal', name: 'test-modal'},
  {path: '/game', name: 'game'},
  {path: '/test-promise', name: 'test-promise'},
  {path: '/test-pure', name: 'test-pure'},
  {path: '/test-hookparent', name: 'test-hookparent'},
  {path: '/test-tree', name: 'test-tree'},
  {path: '/test-webcomponents', name: 'test-webcomponents'},
  {path: '/test-virtualscroll', name: 'test-virtualscroll'},
  {path: '/test-ai', name: 'test-ai'}
]

function main (props: {
  children: PropTypes.ReactComponentLike
}) {
  console.log('main 🌧️');
  return (
    <div className="main">
      <Catalogue catalogueArr={catalogueArr}></Catalogue>
      <div className="main-content">
        <Switch>
            <Route path='/game' component={Game} ></Route>
            <Route path='/test-diff' component={TestDiff} ></Route>
            <Route path='/test-modal' component={TestModal} ></Route>
            <Route path='/test-promise' component={TestPromise}></Route>
            <Route path='/test-pure' component={TestPure}></Route>
            <Route path='/test-hookparent' component={HookParent}></Route>
            <Route path='/test-tree' component={TestTree}></Route>
            <Route path='/test-webcomponents'>
              {/* @ts-ignore */}
              <popup-info></popup-info>
            </Route>
            <Route path="/test-virtualscroll" component={TestVirtualScroll}></Route>
            <Route path="/test-ai" component={ScanPage}></Route>
        </Switch>
      </div>
      
    </div>
  )
}
export default main